.action-bar {
  @apply fixed bottom-[100px] h-[70px] p-1.5 rounded-md overflow-y-hidden overflow-x-auto
  bg-[var(--ls-secondary-background-color)] z-[99999];

  box-shadow:
      /* bottom = shadow-lg */
      0 10px 15px -3px rgba(0,0,0,0.1),
      0 4px 6px -4px rgba(0,0,0,0.1),
      /* top = lighter (closer to shadow-md) */
      0 -6px 10px -4px rgba(0,0,0,0.08),
      0 -2px 4px -4px rgba(0,0,0,0.08);

  .action-bar-commands {
    @apply relative flex w-full;


    .ti, .tie {
      @apply text-[var(--ls-primary-text-color)] text-[23px] opacity-90;
    }

    .description {
      @apply text-[var(--ls-primary-text-color)] text-[10px] opacity-100;
    }

    button {
      @apply flex-1 flex flex-col items-center justify-center py-3 px-1
      opacity-80 active:opacity-100;
    }
  }
}

#mobile-editor-toolbar {
  @apply absolute bottom-0 left-0 w-full z-[99999] flex justify-between bg-gray-100 border-t border-gray-200
  dark:border-gray-800 dark:bg-[#222];

  will-change: transform;
  transform: translateY(calc(-1 * var(--ls-native-kb-height, 0)));
  opacity: var(--ls-native-toolbar-opacity, 0);
  transition: transform 250ms ease-out, opacity 50ms ease-out;

  button {
    @apply flex items-center py-2 px-2 opacity-95;
  }

  .submenu {
    @apply fixed left-0 bottom-0 w-full flex-row justify-evenly items-center z-10 bg-base-2
    hidden overflow-x-auto overflow-y-hidden h-5 border;

    &.show-submenu {
      @apply flex;
    }
  }

  .toolbar-commands {
    @apply flex justify-between items-center overflow-y-hidden overflow-x-auto;

    &::-webkit-scrollbar {
      @apply h-1;
    }
  }

  .toolbar-hide-keyboard {
    @apply border-l border-gray-200 dark:border-gray-700;
  }
}

html.is-native-ipad {
  .action-bar {
    @apply w-[70%] min-w-[550px];

    @media (orientation: landscape) {
      @apply w-1/2;
    }
  }
}

html.is-native-iphone {
  .action-bar {
    left: 3%;
    right: 3%;
  }

  @media (orientation: landscape) {
    .cp__footer {
      height: 45px;
    }

    .action-bar {
      bottom: 50px;
      left: 15%;
      right: 15%;
      width: 70%;
      min-width: 450px;
    }
  }
}

html.is-native-iphone-without-notch,
html.is-native-android {
  .cp__footer {
    height: 45px;
  }

  .action-bar {
    left: 5%;
    right: 5%;
  }

  @media (orientation: landscape) {

    .action-bar {
      bottom: 50px;
      left: 15%;
      right: 15%;
      width: 70%;
    }
  }

  .cp__sidebar-left-layout {
    bottom: 0;
  }
}

html.is-zoomed-native-ios {
  .cp__footer {
    height: 70px;
  }

  @media (orientation: landscape) {
    .cp__footer {
      height: 50px;
    }
  }
}

.cp__graph-picker {
  button.toggle-item {
    opacity: .5;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      color: inherit;
      opacity: .5;
    }

    &.is-on {
      @apply opacity-100;
    }
  }
}
